<script setup lang="ts"></script>

<template>
  <ElContainer class="outer">
    <ElHeader height="64px">
      <AppHeader></AppHeader>
    </ElHeader>
    <ElContainer class="inner">
      <ElAside>
        <AppAside></AppAside>
      </ElAside>
      <ElMain>
        <RouterView class="ani">
          <template #default="{ Component }">
            <Transition name="xyz" mode="out-in">
              <KeepAlive>
                <component :is="Component"></component>
              </KeepAlive>
            </Transition>
          </template>
        </RouterView>
      </ElMain>
    </ElContainer>
    <SelfModify></SelfModify>
  </ElContainer>
</template>

<style scoped>
.outer {
  /* border: 1px solid brown; */
  height: 100vh;
}
.inner {
  /* border: 1px solid blue; */
  overflow: auto;
}
.el-header {
  background-color: burlywood;
}
.el-aside {
  background-color: burlywood;
  width: fit-content;
}
.el-main {
  background-color: white;
}

.xyz-enter-active {
  animation: xyzframe 0.85s ease-in-out;
}
.xyz-leave-active {
  animation: xyzframe 0.85s ease-in-out reverse;
}
@keyframes xyzframe {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    transform: scale(1);
    opacity: 100%;
  }
}
.ani {
  transform-origin: left;
  /* border: solid 2px red; */
}
</style>
